﻿<!DOCTYPE HTML>
<html>
<head>
    <title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/skel.min.js"></script>
    <script src="js/skel-panels.min.js"></script>
    <script src="js/init.js"></script>
    <script src="js/notification.js"></script>

    <script type="text/javascript" src="js/ui.core.js"></script>
    <script type="text/javascript" src="js/jquery.scroll-follow.js"></script>
    <script type="text/javascript" src="js/todo.js"></script>
    <link rel="stylesheet" type="text/css" href="css/animate-custom.css"/>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#tdl-spmenu-s2').scrollFollow({
                speed: 1,
                offset: 70
            });
        });
    </script>
    <noscript>
        <!--<link rel="stylesheet" href="css/skel-noscript.css"/>-->
        <link rel="stylesheet" href="css/style.css"/>
        <!--<link rel="stylesheet" href="css/style-wide.css"/>-->
    </noscript>
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700|Open+Sans+Condensed:300,700"
          rel="stylesheet"/>
</head>
<body class="edit-body">

<!-- Top Tool Bar -->
<div id="top-tool" class="skel-panels-fixed">

</div>


<!-- Header -->
<div id="header" class="skel-panels-fixed">

    <div class="top">
        <!-- noti -->
        <div class="noti">
            <a class="event-request-icon">
                <div class="count">22</div>
            </a>

            <div class="event-request-item">
                <ul class="root">
                    <li><a href="#">
                        <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                              alt=""/></span>

                <span class="noti-body">
                    <b class="user-name">thnonl</b>
                    Demo notification<br/>
                <i class="noti-date">10 min ago</i></span>
                    </a></li>
                    <li><a href="#">
                        <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                              alt=""/></span>

                <span class="noti-body">
                    <b class="user-name">thnonl</b>
                    Demo notification Demo notification Demo notification Demo notification Demo<br/>
                <i class="noti-date">10 min ago</i></span>
                    </a></li>
                    <li><a href="#">
                        <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                              alt=""/></span>

                <span class="noti-body">
                    <b class="user-name">thnonl</b>
                    Demo notification<br/>
                <i class="noti-date">10 min ago</i></span>
                    </a></li>

                </ul>
            </div>


            <a class="friend-request-icon">
                <div class="count">1</div>
            </a>

            <div class="friend-request-item">
                <ul class="root">
                    <li><a href="#"> <span class="image avatar-micro"><img src="images/avatar.jpg" alt=""/></span> <span
                            class="noti-body">                     <b class="user-name">thnonl</b> have kicked your shelf.<br/>                 <i
                            class="noti-date">10 min ago</i></span> </a></li>
                </ul>
            </div>
            <a class="message-icon">
                <div class="count">10</div>
            </a>

            <div class="message-item">
                <ul class="root">
                    <li><a href="#"> <span class="image avatar-micro"><img src="images/avatar.jpg" alt=""/></span> <span
                            class="noti-body">                     <b class="user-name">thnonl</b>                     Demo notification Demo notification Demo notification Demo notification Demo<br/>                 <i
                            class="noti-date">10 min ago</i></span> </a></li>
                    <li><a href="#"> <span class="image avatar-micro"><img src="images/avatar.jpg" alt=""/></span> <span
                            class="noti-body">                     <b class="user-name">thnonl</b>                     Demo notification Demo notification Demo notification Demo notification Demo<br/>                 <i
                            class="noti-date">10 min ago</i></span> </a></li>
                    <li><a href="#"> <span class="image avatar-micro"><img src="images/avatar.jpg" alt=""/></span> <span
                            class="noti-body">                     <b class="user-name">thnonl</b>                     Demo notification Demo notification Demo notification Demo notification Demo<br/>                 <i
                            class="noti-date">10 min ago</i></span> </a></li>
                </ul>
            </div>
            <a class="noti-icon">
                <div class="count">99</div>
            </a>

            <div class="notification-item">
                <ul class="root">
                    <li><a href="#"> <span class="image avatar-micro"><img src="images/avatar.jpg" alt=""/></span> <span
                            class="noti-body">                     <b class="user-name">thnonl</b>                     Demo notification Demo notification Demo notification Demo notification Demo<br/>                 <i
                            class="noti-date">10 min ago</i></span> </a></li>
                    <li><a href="#"> <span class="image avatar-micro"><img src="images/avatar.jpg" alt=""/></span> <span
                            class="noti-body">                     <b class="user-name">thnonl</b>                     Demo notification Demo notification Demo notification Demo notification Demo<br/>                 <i
                            class="noti-date">10 min ago</i></span> </a></li>
                    <li><a href="#"> <span class="image avatar-micro"><img src="images/avatar.jpg" alt=""/></span> <span
                            class="noti-body">                     <b class="user-name">thnonl</b>                     Demo notification Demo notification Demo notification Demo notification Demo<br/>                 <i
                            class="noti-date">10 min ago</i></span> </a></li>
                </ul>
            </div>
        </div>
        <!-- avatar-header -->
        <div id="avatar-header">
            <span class="image avatar-large"><img src="images/avatar.jpg" alt=""/></span>

            <h1 id="user-name">thnonl</h1>
            <span class="byline">Thái Hoàng Nam</span>
        </div>

        <!-- Nav -->
        <nav id="nav">
            <ul>
                <li><a href="#top" id="top-link" class="skel-panels-ignoreHref"><span class="fa fa-home">Home</span></a>
                </li>
                <li><a href="#" class="skel-panels-ignoreHref"><span class="fa fa-envelope">Message</span></a></li>
                <li><a href="#" class="skel-panels-ignoreHref"><span class="fa fa-user">My Timeshelf</span></a></li>
                <li><a href="#" class="skel-panels-ignoreHref"><span class="fa fa-th">Event Calendar</span></a></li>
            </ul>
        </nav>

        <!-- Recent Event -->
        <div id="recent-event"><p style="text-align: left; font-size: 0.8em; margin-left: 40px;">Recent Events</p>

            <div class="item">
                <a href="#"><span>Halloween</span></a>
                <a href="#"><span>Va lung tung</span></a>
                <a href="#"><span>Giữa thu</span></a>
                <a href="#"><span>Giáng xinh</span></a>
                <a href="#"><span>Xin nhựt</span></a>
            </div>
        </div>
    </div>
</div>

<!-- Main -->
<div id="main">

<!-- Home -->
<section id="top" class="one">

<!-- To-do list -->
<div class="tdl-spmenu tdl-spmenu-vertical tdl-spmenu-right" id="tdl-spmenu-s2">
    <div id="btn"></div>
    <div class="to-do-list"><h1>Every day</h1>
        <ul class="to-do-item">

            <li><input type="checkbox" id="everyday-1" checked/>
                <label for="everyday-1">Ăn sáng</label></li>

            <li><input type="checkbox" id="everyday-2"/><label for="everyday-2">Đánh nhau</label></li>
            <li><input type="checkbox" id="everyday-3" checked/><label for="everyday-3">Chơi gêm</label></li>
            <li><input type="checkbox" id="everyday-4" checked/><label for="everyday-4">Ăn tối</label></li>
            <li><input type="checkbox" id="everyday-5"/><label for="everyday-5">Chat đêm</label></li>
        </ul>
    </div>
</div>

<!-- List event -->
<div class="container">
<div class="sort-post">
    <select>
        <option>Recently added</option>
        <option>Time of events</option>
    </select>
</div>


<!-- Event -->
<div class="line-of-time">
    <div class="box-time">
        <div class="date">01/01</div>
        <div class="year">2014</div>
    </div>

    <div class="post box">
        <div class="avatar-post">
            <span class="image avatar-small"><img src="images/avatar.jpg" alt=""/></span>

            <h1>thnonl</h1>
            <span class="byline">Thái Hoàng Nam</span>
            <center><h2 class="title"><a href="#">Morning Glory</a></h2></center>
        </div>

        <div class="frame">
            <a href="post.html">
                <img src="images/post1.jpg" alt=""/>
            </a>
        </div>

        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.
            A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.
            A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.</p>

        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.
            A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.
        </p>

        <div class="details">
            <span class="icon-event"><a href="#">September 26, 2012</a></span>
            <span class="likes"><a href="#">44</a></span>
            <span class="comments"><a href="#">3</a></span>
        </div>
    </div>
    <div class="box-comment">
        <textarea placeholder="Write comment..."></textarea>

        <div class="list-comment">
            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/ava1.png"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart.
                <i class="comment-date">10h20 November 20, 2013</i>
                </span>

            </div>

            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/ava2.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart.
                <i class="comment-date">10h20 November 20, 2013</i>
                </span>

            </div>

            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole<i class="comment-date">10h20 November 20, 2013</i>
</span>
            </div>
            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity .
                <i class="comment-date">10h20 November 20, 2013</i>
                </span>

            </div>


        </div>


    </div>

</div>

<!-- Event -->
<div class="line-of-time">
    <div class="box-time">
        <div class="date">01/01</div>
        <div class="year">2014</div>
    </div>

    <div class="post box">
        <div class="avatar-post">
            <span class="image avatar-small"><img src="images/avatar.jpg" alt=""/></span>

            <h1>thnonl</h1>
            <span class="byline">Thái Hoàng Nam</span>
            <center><h2 class="title"><a href="#">Morning Glory</a></h2></center>
        </div>

        <div class="frame">
            <a href="post.html">
                <img src="images/post1.jpg" alt=""/>
            </a>
        </div>

        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.
            A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.
            A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.</p>

        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.
            A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.
        </p>

        <div class="details">
            <span class="icon-event"><a href="#">September 26, 2012</a></span>
            <span class="likes"><a href="#">44</a></span>
            <span class="comments"><a href="#">3</a></span>
        </div>
    </div>
    <div class="box-comment">
        <textarea placeholder="Write comment..."></textarea>

        <div class="list-comment">
            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart. <i class="comment-date">10h20 November 20, 2013</i> </span>

            </div>

            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart. <i class="comment-date">10h20 November 20, 2013</i> </span>

            </div>

            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart. <i class="comment-date">10h20 November 20, 2013</i> </span>

            </div>
            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart. <i class="comment-date">10h20 November 20, 2013</i> </span>

            </div>
            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart. <i class="comment-date">10h20 November 20, 2013</i> </span>

            </div>


        </div>


    </div>

</div>
<!-- Event -->
<div class="line-of-time">
    <div class="box-time">
        <div class="date">01/01</div>
        <div class="year">2014</div>
    </div>

    <div class="post box">
        <div class="avatar-post">
            <span class="image avatar-small"><img src="images/avatar.jpg" alt=""/></span>

            <h1>thnonl</h1>
            <span class="byline">Thái Hoàng Nam</span>
            <center><h2 class="title"><a href="#">Morning Glory</a></h2></center>
        </div>

        <div class="frame">
            <a href="post.html">
                <img src="images/post1.jpg" alt=""/>
            </a>
        </div>

        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.
            A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.
            A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.</p>

        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.
            A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.
        </p>

        <div class="details">
            <span class="icon-event"><a href="#">September 26, 2012</a></span>
            <span class="likes"><a href="#">44</a></span>
            <span class="comments"><a href="#">3</a></span>
        </div>
    </div>
    <div class="box-comment">
        <textarea placeholder="Write comment..."></textarea>

        <div class="list-comment">
            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart. <i class="comment-date">10h20 November 20, 2013</i> </span>

            </div>

            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart. <i class="comment-date">10h20 November 20, 2013</i> </span>

            </div>

            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart. <i class="comment-date">10h20 November 20, 2013</i> </span>

            </div>
            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart. <i class="comment-date">10h20 November 20, 2013</i> </span>

            </div>
            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart. <i class="comment-date">10h20 November 20, 2013</i> </span>

            </div>


        </div>


    </div>

</div>

<!-- Event -->
<div class="line-of-time">
    <div class="box-time">
        <div class="date">01/01</div>
        <div class="year">2014</div>
    </div>

    <div class="post box">
        <div class="avatar-post">
            <span class="image avatar-small"><img src="images/avatar.jpg" alt=""/></span>

            <h1>thnonl</h1>
            <span class="byline">Thái Hoàng Nam</span>
            <center><h2 class="title"><a href="#">Morning Glory</a></h2></center>
        </div>

        <div class="frame">
            <a href="post.html">
                <img src="images/post1.jpg" alt=""/>
            </a>
        </div>

        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.
            A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.
            A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.</p>

        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.
            A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.
        </p>

        <div class="details">
            <span class="icon-event"><a href="#">September 26, 2012</a></span>
            <span class="likes"><a href="#">44</a></span>
            <span class="comments"><a href="#">3</a></span>
        </div>
    </div>
    <div class="box-comment">
        <textarea placeholder="Write comment..."></textarea>

        <div class="list-comment">
            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart. <i class="comment-date">10h20 November 20, 2013</i> </span>

            </div>

            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart. <i class="comment-date">10h20 November 20, 2013</i> </span>

            </div>

            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart. <i class="comment-date">10h20 November 20, 2013</i> </span>

            </div>
            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart. <i class="comment-date">10h20 November 20, 2013</i> </span>

            </div>
            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart. <i class="comment-date">10h20 November 20, 2013</i> </span>

            </div>


        </div>


    </div>

</div>

<!-- Event -->
<div class="line-of-time">
    <div class="box-time">
        <div class="date">01/01</div>
        <div class="year">2014</div>
    </div>

    <div class="post box">
        <div class="avatar-post">
            <span class="image avatar-small"><img src="images/avatar.jpg" alt=""/></span>

            <h1>thnonl</h1>
            <span class="byline">Thái Hoàng Nam</span>
            <center><h2 class="title"><a href="#">Morning Glory</a></h2></center>
        </div>

        <div class="frame">
            <a href="post.html">
                <img src="images/post1.jpg" alt=""/>
            </a>
        </div>

        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.
            A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.
            A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.</p>

        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.
            A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.
        </p>

        <div class="details">
            <span class="icon-event"><a href="#">September 26, 2012</a></span>
            <span class="likes"><a href="#">44</a></span>
            <span class="comments"><a href="#">3</a></span>
        </div>
    </div>
    <div class="box-comment">
        <textarea placeholder="Write comment..."></textarea>

        <div class="list-comment">
            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart. <i class="comment-date">10h20 November 20, 2013</i> </span>

            </div>

            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart. <i class="comment-date">10h20 November 20, 2013</i> </span>

            </div>

            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart. <i class="comment-date">10h20 November 20, 2013</i> </span>

            </div>
            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart. <i class="comment-date">10h20 November 20, 2013</i> </span>

            </div>
            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart. <i class="comment-date">10h20 November 20, 2013</i> </span>

            </div>


        </div>


    </div>

</div>

<!-- Event -->
<div class="line-of-time">
    <div class="box-time">
        <div class="date">01/01</div>
        <div class="year">2014</div>
    </div>

    <div class="post box">
        <div class="avatar-post">
            <span class="image avatar-small"><img src="images/avatar.jpg" alt=""/></span>

            <h1>thnonl</h1>
            <span class="byline">Thái Hoàng Nam</span>
            <center><h2 class="title"><a href="#">Morning Glory</a></h2></center>
        </div>

        <div class="frame">
            <a href="post.html">
                <img src="images/post1.jpg" alt=""/>
            </a>
        </div>

        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.
            A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.
            A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.</p>

        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.
            A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.
        </p>

        <div class="details">
            <span class="icon-event"><a href="#">September 26, 2012</a></span>
            <span class="likes"><a href="#">44</a></span>
            <span class="comments"><a href="#">3</a></span>
        </div>
    </div>
    <div class="box-comment">
        <textarea placeholder="Write comment..."></textarea>

        <div class="list-comment">
            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart. <i class="comment-date">10h20 November 20, 2013</i> </span>

            </div>

            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart. <i class="comment-date">10h20 November 20, 2013</i> </span>

            </div>

            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart. <i class="comment-date">10h20 November 20, 2013</i> </span>

            </div>
            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart. <i class="comment-date">10h20 November 20, 2013</i> </span>

            </div>
            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart. <i class="comment-date">10h20 November 20, 2013</i> </span>

            </div>


        </div>


    </div>

</div>

<!-- Event -->
<div class="line-of-time">
    <div class="box-time">
        <div class="date">01/01</div>
        <div class="year">2014</div>
    </div>

    <div class="post box">
        <div class="avatar-post">
            <span class="image avatar-small"><img src="images/avatar.jpg" alt=""/></span>

            <h1>thnonl</h1>
            <span class="byline">Thái Hoàng Nam</span>
            <center><h2 class="title"><a href="#">Morning Glory</a></h2></center>
        </div>

        <div class="frame">
            <a href="post.html">
                <img src="images/post1.jpg" alt=""/>
            </a>
        </div>

        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.
            A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.
            A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.</p>

        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.
            A wonderful serenity has taken possession of my entire soul, like these sweet mornings of autumn
            which I enjoy with my whole heart.
        </p>

        <div class="details">
            <span class="icon-event"><a href="#">September 26, 2012</a></span>
            <span class="likes"><a href="#">44</a></span>
            <span class="comments"><a href="#">3</a></span>
        </div>
    </div>
    <div class="box-comment">
        <textarea placeholder="Write comment..."></textarea>

        <div class="list-comment">
            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart. <i class="comment-date">10h20 November 20, 2013</i> </span>

            </div>

            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart. <i class="comment-date">10h20 November 20, 2013</i> </span>

            </div>

            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart. <i class="comment-date">10h20 November 20, 2013</i> </span>

            </div>
            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart. <i class="comment-date">10h20 November 20, 2013</i> </span>

            </div>
            <!-- Comment item -->
            <div class="comment-item">
                            <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                  alt=""/></span>

                <span class="comment-body">
                    <b class="user-name">thnonl</b>
                    A wonderful serenity has taken possession of my entire soul, like
                these sweet mornings of autumn
                which I enjoy with my whole heart. <i class="comment-date">10h20 November 20, 2013</i> </span>

            </div>


        </div>


    </div>

</div>
</div>

</section>
</div>
<script src="js/classie.js"></script>

<script>
    var menuRight = document.getElementById('tdl-spmenu-s2'),
            showRight = document.getElementById('btn'),
            body = document.body;

    showRight.onclick = function () {
        classie.toggle(menuRight, 'tdl-spmenu-open');
    };

</script>


</body>
</html>